<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy"
        content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">

    <title>Dynamic Grid</title>
    <style>
        body {
            color: white;
        }

        input[type="range"] {
            writing-mode: vertical-lr;
                transform: rotate(180deg); /* 翻转方向 */

            /* 设置滑块竖直显示 */
            width: 16px;
            height: 86px;
            margin: 10px 0;
            -webkit-appearance: none;
            appearance: none;
            cursor: pointer;
            /* transform: rotate(270deg);
    -webkit-transform: rotate(270deg); */
            /* 针对 Safari */
            /* margin: 10px; */
            /* 默认背景颜色设置为红色 */
            /* background: transparent; */
            /* 使用 CSS 变量控制渐变背景 */
            /* background: var(--track-color, green); */
            /* 设置默认颜色为 red，如果没有定义 --track-color 就使用 red */
            background: aqua;
            /*初始的渐变背景，已滑动部分为绿色，未滑动部分为灰色*/
            /* 让滑块占据剩余空间 */
            min-height: 10px;
            border-radius: 10px;
            border: 0.5px solid var(--my-btn-border-color);
            /* flex-grow: 1; */
        }
    </style>
</head>

<body>
    <button id="btn">连接 HID 设备</button>
    <p></p>
    <label id="lbl" for="slider"> <input type="range" class="h_slider" id="slider" value="12" min="-12" max="12"> <span
            id="slider_value">12</span>
    </label>
    <script>
        const slider = document.getElementById('slider');
        const valueLabel = document.getElementById('slider_value');

        slider.addEventListener('input', (event) => {
            valueLabel.textContent = slider.value; // 实时更新值
        });

        document.querySelector('#btn').addEventListener('click', async () => {

            // const [device] = await navigator.hid.requestDevice({
            //     // filters: [{ vendorId: 0xA8A4, productId: 0x2255 }]
            //     filters: [{ vendorId: 43172, productId: 8789}] // 修改为你的 vendorId
            // });

            console.log(`=========>`);
            // console.log(device);

            const devices = await navigator.hid.getDevices();
            console.log(devices);
            if (!device) {
                return;
            }
            await device.open();

            device.addEventListener('inputreport', (event) => {
                const { data, reportId } = event;
                console.log('Received data:', new Uint8Array(data.buffer));
            });

            navigator.hid.addEventListener('connect', (event) => {
                console.log('Device connected:', event.device);
            });

            navigator.hid.addEventListener('disconnect', (event) => {
                console.log('Device disconnected:', event.device);
            });

            console.log('Device ready:', device);
        });
    </script>

</body>

</html>